<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tab选项卡</title>
  <style>
    li {
      list-style: none;
      float: left;
      width: 100px;
      height: 50px;
      border: 1px solid blue;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
    .active {
      background-color: orange;
    }
    .border {
      width: 400px;
      height: 300px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>

<div id="app">
  <ul>
    <li :class="{active: currentIdx === index}" v-for="(item,index) in list" @click="handle(index)">{{item.title}}</li>
  </ul>

  <div v-for="(item,index) in list" >
    <img v-if="idx === index" :src="item.path" :class="index === currentIdx ? 'border': ''" />
  </div>

</div>

<script src="../lib/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      idx: 0,
      currentIdx: 0,
      list: [
        {
          id: 1,
          title: 'apple',
          path: './imgs/apple.jpg'
        },
        {
          id: 2,
          title: 'orange',
          path: './imgs/orange.jpg'
        },
        {
          id: 3,
          title: 'lemon',
          path: './imgs/lemon.jpg'
        },
      ]
    },
    methods: {
      handle(idx) {
        this.idx = idx;
        this.currentIdx = idx;
        console.log(idx)
      }
    }
  })
</script>

</body>
</html>